<template>
  <div class="login">
    <el-dialog title="登录" :visible.sync="$store.state.loginVisible" width="30%" center :before-close="handleClose">
      <el-form
        :model="loginForm"
        status-icon
        :rules="loginRules"
        ref="loginForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="userName">
          <el-input
            v-model="loginForm.userName"
            prefix-icon="el-icon-user"
            placeholder="输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            prefix-icon="el-icon-view"
            placeholder="输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import login from '../miAPI/login'
export default {
  name: "login",
  data() {
    var reg = /^[a-zA-Z]([-_a-zA-Z0-9]{5,17})$/;
    var userReg = /^[a-zA-Z]([-_a-zA-Z0-9]{4,16})$/;
    // 用户名
    var validateUser = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else if (userReg.test(value) == false) {
        callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      } else {
        callback();
      }
    };
    //密码的验证
    var validatePass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入密码"));
      } else if (reg.test(value) == false) {
        callback(new Error("字母开头,长度6-18之间,允许字母数字下划线"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        userName: null,
        password: null,
      },
      user:null,
      loginRules: {
        userName: [{ validator: validateUser, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(form) {
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          let {data:res} = await login.LoginMi(this.loginForm)
          if(res.code == "001"){
            this.$notify({
              type:"success",
              title: '提示',
              message: res.msg,
              duration:3000
            });
            // this.user = res.user
            this.$store.commit('getUser',res.user)
            this.loginForm = {
              userName: null,
              password: null,
            }
            this.$store.commit('setlogin')
          }else{
            this.$notify({
              type:"error",
              title: '警告',
              message: res.msg,
              duration:3000
            });
          }
        } else {
          this.$notify({
              type:"error",
              title: '警告',
              message: '请正确填写表单',
              duration:3000
            });
            return false;
        }
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.$store.commit("setlogin")
          done();
        })
        .catch(_ => {});
    }
  },
};
</script>

<style lang='scss'>
.el-dialog {
  // text-align: center;
  .el-button {
    width: 160px;
  }
}
</style>